<template>
<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <TodoHeader :addList="addList"/>
      <TodoList :lists="lists" :changeCheck="changeCheck" :delList="delList"/>
      <TodoFooter :allList="allList" :tagNum="tagNum" :isSelectAll="isSelectAll" :delDone="delDone"/>
    </div>
  </div>
</div>
</template>

<script>
import TodoHeader from "./views/TodoHeader/index.vue";
import TodoFooter from "./views/TodoFooter/index.vue";
import TodoList from "./views/TodoList/index.vue";
  export default {
    data(){
      return {
        lists:[
          { id:1, name:"吃饭", tag:false },
          { id:2, name:"睡觉", tag:false },
          { id:3, name:"打豆豆", tag:true },
        ],
      };
    },
    methods:{
      // 添加功能
      addList(iptValue){
        this.lists.push({
          id: Date.now(),
          name: iptValue,
          tag: false,
        });
      },
      // 单选
      changeCheck(id){
        const list = this.lists.find((list) => list.id === id);
        list.tag = !list.tag;
      },
      // 单个删除
      delList(index){
        this.lists.splice(index,1);
      },
      // 是否全选
      isSelectAll(tag){
        this.lists.forEach((list) => {
          list.tag = tag
        });
      },
      // 删除已完成的
      delDone(){
        this.lists = this.lists.filter((list) => list.tag === false);
      }
    },
    computed:{
      // 全部数量
      allList(){
        return this.lists.length;
      },
      // 已完成数量
      /* 
        reduce( (p,c)=>{} , 0) 累加
        previous  p，上一次遍历的返回值，初始化为 第二个参数：0
        current  c，遍历的item。遍历项元素
      */
      tagNum(){
        return this.lists.reduce((previous,current) => {
          return previous + current.tag;
        }, 0);
      }
      
    },
    components: {
      TodoHeader,
      TodoFooter,
      TodoList,
    },
  }
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>